/**
* 模版
**/

<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        标题
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        主要数据1
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
        主要数据2
      </el-col>
      
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="4" :lg="16" :xl="16">
        <el-row :gutter="10">
          <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  
                </div>
                卡片1
              </el-card>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  
                </div>
                卡片1
              </el-card>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  
                </div>
                卡片1
              </el-card>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  
                </div>
                卡片1
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            
            <div class="grid-content bg-purple-light">图3</div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <div class="grid-content bg-purple-light">图4</div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <div class="grid-content bg-purple-light">图5</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入组件
import temp from "../../components/template.vue";
import { List, Delete, Add, Update } from "../../api/gameMG.js";
// 导出模块
export default {
  // 模块名字
  name: "test_zgx",
  // 模块数据
  data() {
    //数据
    return {};
  },
  // 注册组件
  components: {
    CRUD: temp,
  },
  mounted() {},
};
</script>
// scoped 样式只在本组件使用
<style scoped>
.el-row {
  margin: 10px;
}
.el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
